<template>
  <div id="app">
    <h1>工程{{this.projectName}} 参数列表</h1>
    <vxe-toolbar>
      <template v-slot:buttons>
        <el-button  icon="el-icon-plus" v-if="allModify==='1'" @click="handleAdd()">新增</el-button>
        <el-button  icon="el-icon-back" @click="handleReturn()">返回</el-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      border
      show-header-overflow
      show-overflow
      highlight-hover-row
      :align="allAlign"
      :data="tableData"
      row-id="id"
      height="480"
      size="medium"
      :loading="loading"
      ref="xTable1"
      @cell-dblclick="cellDBLClickEvent"
    >
      <vxe-table-column
        field="ID"
        type="checkbox"
        width="60"
      ></vxe-table-column>
      <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
      <vxe-table-column
        field="PROPERTY_TYPE"
        title="参数类型"
        width="100"
        :formatter="formatterPropertyType"
      ></vxe-table-column>
      <vxe-table-column
        field="PROPERTY_TITLE"
        title="参数标题"
        width="100"
      ></vxe-table-column>
      <vxe-table-column
        field="WIDTH"
        title="宽度"
        width="100"
      ></vxe-table-column>
      <vxe-table-column
        field="RULES"
        title="验证规则"
        width="100"
        ></vxe-table-column>
      <vxe-table-column
        field="OPTIONS"
        title="选择内容"
        width="100"
      ></vxe-table-column>
      <vxe-table-column
        field="BIND_MODEL"
        title="参数名"
        width="100"
      ></vxe-table-column>
      <vxe-table-column
        field="PLACEHOLDER"
        title="占位符"
        width="100"
      ></vxe-table-column>
      <vxe-table-column
        field="MAX_LENGTH"
        title="最大长度"
        width="100"
      ></vxe-table-column>
      <vxe-table-column
        field="STYLE"
        title="cs风格"
        width="100"
      ></vxe-table-column>
      <vxe-table-column
        field="INIT_VAL"
        title="初始化值"
        width="100"
      ></vxe-table-column>
      <vxe-table-column
        field="MAX_VAL"
        title="最大值"
        width="100"
      ></vxe-table-column>
      <vxe-table-column
        field="MIN_VAL"
        title="最小值"
        width="100"
      ></vxe-table-column>
      <vxe-table-column
        field="PRECISION"
        title="小数位"
        width="100"
      ></vxe-table-column>
      <vxe-table-column
        field="STEP"
        title="步长"
        width="100"
      ></vxe-table-column>
      <vxe-table-column
        field="MAX_ROWS"
        title="最大行数"
        width="100"
      ></vxe-table-column>
      <vxe-table-column
        field="MIN_ROWS"
        title="最小行数"
        width="100"
      ></vxe-table-column>
      <vxe-table-column
        field="INIT_ROW_NUM"
        title="初始化行数"
        width="100"
      ></vxe-table-column>
      <vxe-table-column
        field="INIT_COLUMN_NUM"
        title="初始化列数"
        width="100"
      ></vxe-table-column>
      <vxe-table-column title="操作" width="100" show-overflow>
        <template v-slot="{ row }">
          <i class="el-icon-edit" @click="handleEdit(row)"></i>
          <i style="margin-left: 5px;" class="el-icon-delete" v-if="allModify==='1'" @click="handleDelete(row)"></i>
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      border
      size="medium"
      :loading="loading"
      :current-page="tablePage.pageNo"
      :page-size="tablePage.pageSize"
      :total="tablePage.totalResult"
      :layouts="[
        'PrevPage',
        'JumpNumber',
        'NextPage',
        'FullJump',
        'Sizes',
        'Total'
      ]"
      @page-change="handlePageChange"
    >
    </vxe-pager>
  </div>
</template>

<script>
import request from "../utils/request";
import {propertyType} from "../const/const";
export default {
  name: "projectparameter",
  methods: {
    //格式化属性类型
    formatterPropertyType({ cellValue }){
      let item = propertyType.find(item => item.value === cellValue)
      return item ? item.label : ''
    },
    handleReturn(){
      this.$router.push({ path: "/project/list"});
    },
    handleAdd() {
      this.$router.push({ path: "/projectparameter/add/"+this.projectId });
    },
    //装入表格数据
    loadTableData(projectId) {
      var userId = localStorage.userId;
      const that = this;
      request({
        method: "POST",
        url: `/api/ProjectParameter/listPage?projectId=${this.projectId}&pageNo=${that.tablePage.pageNo}&pageSize=${that.tablePage.pageSize}`,
      })
        .then(res => {
          if (res.data.status == "1") {
            debugger;
            that.tableData = res.data.list;
            that.tablePage.totalResult = res.data.count;
            that.projectName = res.data.projectName;
            this.$message(res.data.message);
          } else {
            this.$message(res.data.message);
            return false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleDelete(row) {
      console.log(row);
      const param = {
        id: row.ID
      };
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        request({
          method: "POST",
          url: "/api/ProjectParameter/delete",
          data: param
        })
          .then(res => {
            if (res.data.status == "1") {
              this.loadTableData(this.projectId);
              this.$message(res.data.message);
            } else {
              this.$message(res.data.message);
              return false;
            }
          })
          .catch(err => {
            console.log(err);
          });
      });
    },
    handleEdit(row) {
      console.log(row);
      this.$router.push({ path: "/projectparameter/edit/" + row.ID });
    },
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.pageNo = currentPage;
      this.tablePage.pageSize = pageSize;
      this.loadTableData(this.projectId);
    },
    cellDBLClickEvent ({ row }) {
      var rowId =row.ID;
      console.log("rowId:"+rowId);
      this.$router.push({ path: "/projectparameter/edit/"+rowId});
    },
  },

  data() {
    return {
      allAlign: null,
      tableData: [],
      loading: false,
      tablePage: {
        pageNo: 1,
        pageSize: 10,
        totalResult: 0
      },
      projectId:'',
      projectName:'',
      allModify:'0',
    };
  },
  mounted() {
    debugger;
    this.projectId = this.$route.params.projectId;
    this.loadTableData(this.projectId);
    this.allModify = localStorage.allowProjectModify;
  }
};
</script>

<style scoped></style>

